<template name="tabControl">
	<scroll-view scroll-x="true" :style="'background-color:'+bgc+';'" :class="fixed?'fxied':''" :scroll-left='scrollLeft'
	 scroll-with-animation id="tabcard">
		<view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''">
			<view :class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')" :style="isEqually? 'width:'+windowWidth/values.length+'px;margin-right:0;':''"
			 v-for="(item,index) in values" :id="'item'+index" :key='index' @click="_onClick(index)">
				<text>{{item}}</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: 'tabControl',
		props: {
			current: {
				type: Number,
				default: 0
			},
			values: {
				type: Array,
				default () {
					return []
				}
			},
			bgc: {
				type: String,
				default: ''
			},
			fixed: {
				type: Boolean,
				default: false
			},
			scrollFlag: {
				type: Boolean,
				default: false
			},
			lineWidth: {
				type: Number,
				default: 48
			},
			itemSize: {
				type: Number,
				default: 30
			},
			activeSize: {
				type: Number,
				default: 32
			},
			activeColor: {
				type: String,
				default: ''
			},
			top: {
				type: Number,
				default: 0
			},
			isEqually: {
				type: Boolean,
				default: false
			},
			temp: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentIndex: 0,
				windowWidth: 0, //设备宽度
				leftList: [], //选项距离左边的距离
				widthList: [], //选项宽度
				scrollLeft: 0, //移动距离
				newScroll: 0, //上一次移动距离(用来判断是左滑还是右滑)
				wornScroll: 0, //上一次移动距离(用来判断是左滑还是右滑)
			};
		},
		created() {

		},
		mounted() {
			setTimeout(() => {
				uni.createSelectorQuery().in(this).select("#tabcard").boundingClientRect((res) => {
					this.$emit('getTabCardHeight', {
						height: res.height
					})
				}).exec()
				uni.getSystemInfo({
					success: (res) => {
						this.windowWidth = res.windowWidth;
						// console.log(this.windowWidth);
						this.values.forEach((i, v) => {
							let info = uni.createSelectorQuery().in(this);
							info.select("#item" + v).boundingClientRect((res) => {
								// 获取第一个元素到左边的距离
								// if(v==0){
								// 	this.startLenght = res.left
								// }
								this.widthList.push(res.width)
								this.leftList.push(res.left)

							}).exec()

						})
						// console.log(this.leftList)
						// console.log(this.widthList)
					}
				});
			})
		},
		created() {
			this.currentIndex = this.current
			if (this.scrollFlag) {
				setTimeout(() => {
					this.tabListScroll(this.current)
				}, 300)
			}
		},
		watch: {
			current(val) {
				if (val !== this.currentIndex) {
					this.currentIndex = val
					if (this.scrollFlag) {
						this.tabListScroll(val)
					}
				}
			},

		},
		methods: {
			_onClick(index) {
				if (this.temp == 0) {
					if (this.currentIndex !== index) {
						this.currentIndex = index
						this.$emit('clickItem', {
							currentIndex: index
						})
						// 开启滚动
						if (this.scrollFlag) {
							this.tabListScroll(index)
						}
					}
				} else {
					uni.showToast({
						title: "升级会员不能切换为标准会员",
						icon: "none"
					});
				}
			},
			// 选项移动
			tabListScroll(index) {
				let scoll = 0;
				this.wornScroll = index;
				// this.wornScroll-this.newScroll>0 在向左滑  ←←←←←
				if (this.wornScroll - this.newScroll > 0) {
					for (let i = 0; i < this.leftList.length; i++) {
						if (i > 1 && i == this.currentIndex) {
							scoll = this.leftList[i - 1]
						}
					}
					// console.log('在向左滑',scoll)
				} else {
					if (index > 1) {
						for (let i = 0; i < this.leftList.length; i++) {
							if (i < index - 1) {
								scoll = this.leftList[i]
							}
						}
					} else {
						scoll = 0
					}
					// console.log('在向右滑')
				}
				this.newScroll = this.wornScroll;
				this.scrollLeft = scoll;
			}
		}
	}
</script>

<style lang="less" scoped>
	.fxied {
		margin: 20rpx 0;
	}

	.tabList {
		background-color: #f4f6f8;
		border-radius: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0rpx 30rpx;
		height: 90rpx;

		.tabItem {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			color: #2660cd;
			line-height: 90rpx;
			border-radius: 100rpx;

			text {
				font-size: 32rpx;
				line-height: 44rpx;
				color: #666;
			}
		}

		.thisOpenSelect {
			background-color: #2660cd;
			color: #fff;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>
